<template>
  <div class="tools">
    <a @click="trigger(operation.type)" v-for="operation in operations" v-bind:key="operation.type">
      <i class="icon" :class="operation.icon"></i>
      <p>{{operation.name}}</p>
    </a>
  </div>
</template>
<style lang="scss">
@import '../config/variables.scss';
.tools {
  position: absolute;
  right: $right-menu-width + 20px;
  top: $header-height + 10px;
  font-size: 12px;
  background: whitesmoke;
  a {
    padding: 5px;
    display: block;
    cursor: pointer;
    &:hover {
      background: white;
    }
    &:active {
      background: wheat;
    }
    i {
      font-size: 18px;
    }
    p {
      margin: 3px;
    }
  }
}
</style>
<script>
export default {
  data () {
    return {
      operations: [
        {
          type: 'cancel',
          icon: 'el-icon-fa-reply',
          name: '撤销'
        },
        {
          type: 'redo',
          icon: 'el-icon-fa-share',
          name: '重做'
        },
        {
          type: 'zoomIn',
          icon: 'el-icon-fa-search-plus',
          name: '放大'
        },
        {
          type: 'zoomOut',
          icon: 'el-icon-fa-search-minus',
          name: '缩小'
        }
      ]
    }
  },
  methods: {
    trigger (type) {
      console.log('trigger', type)
    }
  }
}
</script>
